import { lazy, useCallback, useEffect, useState } from 'react'
/* -------------------------------------------------------- Declare -- */
/* -------------------------------------------------------- Async Component -- */
const Input = lazy(()=>import('@antd/form/input'))
const Button = lazy(()=>import('@antd/button'))
/* -------------------------------------------------------- 回到顶部 -- */
const Index = ({ 
	name, 							/** @param {String}				# name */
	label,							/** @param {String}				# 标签名 */
	size='small', 					/** @param {String}				# 大小 */
	p,								/** @param {String}				#  */
	mode,							/** @param {String}				#  输入框类型*/
	//
	value,							/** @param {Number}				# 值 */
	disabled,						/** @param {Boolan}				# 禁用 */
	// 获取值
	onChange,						/** @param {Event}				# 有 Form 时值改变时执行 */
	onChanged,						/** @param {Event}				# 值改变时执行 */
	// click,							/** @param {Event}				# 点击按钮执行 */
	// 自定义扩展
	input = {},						/** @param {Object}				# input */
	btn = {},						/** @param {Object}				# btn */
	// button
	btnText = '选择',				/** @param {Object}				# 按钮文本 */
	status = 1
}, ref)=> {// eslint-disable-line
	const [ model, setModel ] = useState(value)
	input = { 
		disabled, p, label, name, size, 
		type:mode,
		out:1,
		value:model?.no,
		readOnly:true,
		...input
	}
	
	useEffect(()=> {setModel( value ) }, [ value ]) // eslint-disable-line
	
	const _onChange = value => {
		let result = name ? { model: {[name]: value} } : null
		onChange?.( value )
		onChanged?.({ value, label, ...result  })
	}
	let title = '待售房屋'
	if( status === 3) title = '已售房屋'
	const onClick = useCallback(() => {
		window.$tableModalRef().open({
			modal:{
				title: '选择 【 ' + title + ' 】',
				width 	: '80%',
				height	: '80%',
				controls : { ok:0 }
				// onOk: ({ keys }) => {
				// 	_onChange( keys )
				// 	return true
				// }
			},
			search:{
				param: status ? { status: '0' + status } : null,
				data:[
					{ label:'所属楼盘', 	name:'loupan', type:'select', api:'loupan/dict' },
					{ label:'房号', 	name:'no' },
					// { label:'房间编号', 	name:'no' },
					// { label:'户型', 	name:'room_type', type:'select', api:'room/room_type' },
					// { label:'朝向', 	name:'orient', type:'select', api:'room/room_orient'},
					{ label:'面积', 	name:'area', type:'select', api:'room/room_area' }		
				]
			},
			table:{
				api:'room/dict',
				// idStr:'id',
				className: 'jzer-table-cp',
				row:{ 
					type:1, 
					keys:[ value?.id ],
					onRow: ({ row: { id, no } }) => {
						_onChange( { id, no } )
						window.$tableModalRef().close()
					}
				},
				cols:[
					{ title: '房间编号', 		dataIndex: 'no', 			width:100, align:'center' },
					{ title: '房号', 			dataIndex: 'build_no', 		width:100, align:'center' },
					// { title: '楼栋', 			dataIndex: 'build_no', 		width:60, align:'center' },
					// { title: '单元', 			dataIndex: 'unit_no', 		width:60, align:'center' },
					// { title: '楼层', 			dataIndex: 'floor_no', 		width:60, align:'center' },
					// { title: '房间号', 			dataIndex: 'room_num', 			width:60, align:'center' },
					// { title: '户型', 			dataIndex: 'room_type', 		width:100, align:'center' },
					// { title: '朝向', 			dataIndex: 'orient', 			width:100, align:'center' },
					{ title: '面积(m²)', 		dataIndex: 'area', 			width: 100 },
					{ title: '所属楼盘', 		dataIndex: 'loupan', 		width: 100},
					{ title: '状态', 			dataIndex: 'status', 		width: 100, align: 'center'},
				],
				// controls 	: {
				// 	width: 80,
				// 	data: ({  no }) => [
				// 		{ label:'选择', click:()=>{
				// 			_onChange( no )
				// 			window.$tableModalRef().close()
				// 		}},
				// 	]
				// }
			}
		})
	},[ value ]) // eslint-disable-line

	return (
		<div className='fx'>
			<Input onInput={_onChange} {...input} />
			<Button label={btnText} className='ml10' size={size} onClick={ onClick } disabled={disabled} {...btn} />
		</div>
	)
}

export default Index